<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<html:xhtml />
<script type="text/javascript">
    var snpTable;
    var snps = new Array();

    function getEthnicity()
    {
        if ($("[name=selectedCohort] option:selected").length <= 0)
        {
            return false;
        }
        $("#ethnSelect").empty();
        $.ajax({
            url: "researchAjax.do",
            data: {request: 'ethnicity',
                   selectedCohort: $("[name=selectedCohort]").val()},
            success: function(data) {
                $("#ethnSelect").append(data);
            },
            error: function() {
                $("#ethnSelect").append('<option value="-1">Error on the server. Please reset cohorts.</option>');
            }
        });
    }

    function getSnps()
    {
        $.ajax({
            url: "researchAjax.do",
            data: {request: 'snps',
                   selectedGene: $("[name=selectedGenes]").val()},
            success: function(data) {
                snpTable.fnClearTable();
                rows = data.split("||");
                for (i = 0; i < rows.length; i++)
                {
                    cols = rows[i].split("|");
                    // GOTCHA: The table does not need to be redrawn, and it is faster not to redraw.
                    // Thus, disable redrawing.
                    snpTable.fnAddData(cols, false);
                }
                snpTable.fnDraw();
            }
        });
    }

    $(document).ready(function() {
        // Set up tabs and next/prev buttons
        var $tabs = $("#exportTab").tabs();
        $("#startNext").click(function() {
            getEthnicity();
            $tabs.tabs('select', 1);
            return false;
        });
        $("#filterPrev").click(function() {
            $tabs.tabs('select', 0);
            return false;
        });
        $("#filterNext").click(function() {
            $tabs.tabs('select', 2);
            return false;
        });
        $("#outputPrev").click(function() {
            $tabs.tabs('select', 1);
            return false;
        });

        // Ajax call binding
        $("div#requestStart select").change(function() {
            getEthnicity();
        });
        // 'DataTablize' the table
        snpTable = $("div#snpForm #snpTable").dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"sType": "html"},
                          {"sType": "html"},
                          {"bSortable": false, "bSearchable": false, "sClass": "inputbox"}],
            "aaSorting": [[1,"asc"]]
        });
        // Set up include checkboxes
        $("div#snpForm #snpTable :checkbox").live("click", function(){
            if ($(this).is(":checked"))
            {
                // Add a dummy class
                $(this).parent().parent().addClass("selected");
            }
            else
            {
                // Remove the dummy class added above
                $(this).parent().parent().removeClass("selected");
            }
        });
        // Set up snp select dialog
        $("#snpForm").dialog({
           autoOpen: false,
           modal: true,
           width: 800,
           position: "top",
           buttons: {
                     Ok: function() {
                         $("#hiddenSnps").empty();
                         trs = snpTable.fnGetNodes();
                         for(i = 0; i < trs.length; i++)
                         {
                             // Retrieve all selected rows using the dummy class
                             if ($(trs[i]).hasClass("selected"))
                             {
                                 $("#hiddenSnps").append('<input type="hidden" name="selectedSnps" value="' + $(trs[i]).find(":checked").val() + '" />');
                             }
                         }
                         $(this).dialog("close");
                     },
                     Cancel: function() {
                         $(this).dialog("close");
                     }
                    }
        });
        $("#selectSnp").button().click(function() {
            getSnps();
            $("#snpForm").dialog("open");
        });
    });
</script>
<div id="export" class="content">
    <h2>Request Data File</h2>
    <div id="exportTab" class="tab">
        <ul>
            <li><a href="#requestStart">Start</a></li>
            <li><a href="#requestFilter" onclick="getEthnicity();">Filter</a></li>
            <li><a href="#requestOutput">Output</a></li>
        </ul>
        <html:form action="/exportSubmit">
            <div id="requestStart" class="input">
                <dl>
                    <dt><bean:message key="export.cohort" />:</dt>
                    <dd>
                        <html:select name="exportForm" property="selectedCohort" size="4" multiple="multiple">
                            <html:optionsCollection name="exportForm" property="cohorts" value="cohortID" label="name" />
                        </html:select>
                        <html:errors property="selectedCohort" />
                    </dd>
                    <dt><bean:message key="export.subCohort" />:</dt>
                    <dd>
                        <html:select name="exportForm" property="selectedSubCohort" size="2" multiple="multiple">
                            <html:optionsCollection name="exportForm" property="subCohorts" value="cohortPopulationID" label="populationName" />
                        </html:select>
                        <html:errors property="selectedSubCohort" />
                    </dd>
                </dl>
                <p><html:button styleId="startNext" property="submitType" value="Next" /></p>
            </div>
            <div id="requestFilter" class="input">
                <dl>
                    <dt>Subject Filter:</dt>
                    <dd>
                        <ul>
                            <li><html:checkbox property="removeDuplicateSubjects" /> Remove Duplicate Subjects</li>
                            <li><html:checkbox property="removeMzTwins" /> Remove MZ Twins</li>
                            <li><html:checkbox property="zeroIncomplete" /> Zero genotypes for incomplete trio's</li>
                            <li><html:checkbox property="zeroControls" /> Zero controls</li>
                            <li><html:checkbox property="hyperControls" /> Hyper controls</li>
                            <li><html:checkbox property="caseControl" /> Case-Control</li>
                        </ul>
                    </dd>
                    <dt><bean:message key="export.ethnicity" />:</dt>
                    <dd>
                        <html:select styleId="ethnSelect" property="selectedEthnicity" size="8" multiple="multiple" >
                            <html:option value="-1">Please select cohort(s).</html:option>
                        </html:select>
                        <html:errors property="selectedEthnicity" />
                    </dd>
                </dl>
                <p>
                    <html:button styleId="filterPrev" property="submitType" value="Previous" />
                    <html:button styleId="filterNext" property="submitType" value="Next" />
                </p>
            </div>
            <div id="requestOutput" class="input list">
                <div id="hiddenSnps"></div>
                <dl>
                    <dt><bean:message key="export.gene" />:</dt>
                    <dd>
                        <html:select property="selectedGenes" size="6" multiple="multiple">
                            <html:optionsCollection property="genes" value="geneID" label="name"/>
                        </html:select>
                        <html:errors property="selectedGenes" /><br />
                        <input id="selectSnp" type="button" value="Select individual SNP's" />
                    </dd>
                    <dt>Phenotype to include:</dt>
                    <dd>
                        <html:select property="selectedPhenotype">
                            <html:optionsCollection property="phenotypes" value="phenotypeID" label="name" />
                        </html:select>
                    </dd>
                    <dt>Covariate(s) to include (Optional):</dt>
                    <dd>
                        <html:select property="selectedCovariates" size="6" multiple="multiple">
                            <html:optionsCollection property="covariates" value="phenotypeID" label="name" />
                        </html:select>
                    </dd>
                    <dt>Output Format:</dt>
                    <dd>
                        <html:select property="format">
                            <html:option value="UNPHASED">UNPHASED</html:option>
                            <html:option value="BPlink">Binary Plink</html:option>
                            <html:option value="fbat">fbat</html:option>
                            <html:option value="SAGE">SAGE</html:option>
                        </html:select>
                    </dd>
                    <dt>Number of markers per file:</dt>
                    <dd>
                        <html:radio property="filePerGene" value="true" /> One file per gene<br />
                        <html:radio property="filePerGene" value="false" /> All markers in one file
                    </dd>
                </dl>
                <p>
                    <html:button styleId="outputPrev" property="submitType" value="Previous" />
                    <html:submit styleId="requestData" property="submitType" value="Request Data" />
                </p>
            </div>
            <div id="snpForm" title="Select individual SNP's" class="list">
                <table id="snpTable" cellpadding="0" cellspacing="0" border="0" class="display">
                    <thead>
                        <tr>
                            <th>RS number</th>
                            <th>Gene</th>
                            <th>Include</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </html:form>
    </div>
</div>